<template>
  <div class="container">
    <div class="aside">
      <ul>
        <li v-for="item in data" :key="item.id">
          <p class="title">{{ item.title }}</p>
          <p class="item" v-for="i in item.itemList" :key="i.key">
            <router-link :to="i.path">{{ i.label }}</router-link>
          </p>
        </li>
      </ul>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
const data = reactive([
  {
    id: 0,
    title: '算法-排序',
    itemList: [
      {
        key: 0,
        path: '/algorithm/fiveBaseSort',
        label: '五种基本排序',
      },
    ],
  },
  {
    id: 1,
    title: 'CSS',
    itemList: [
      {
        key: 0,
        path: '/css/tableLayout',
        label: '布局-表格布局',
      },
      {
        key: 1,
        path: '/css/positionProperty',
        label: '布局-position属性',
      },
      {
        key: 2,
        path: '/css/floatLayout',
        label: '布局-float布局',
      },
      {
        key: 3,
        path: '/css/adsorptionBottom',
        label: '吸底效果',
      },
    ],
  },
])
</script>

<style scoped lang="less">
.container {
  display: flex;
  height: 100%;
  .aside {
    overflow: auto;
    width: 200px;
    background: rgba(239, 229, 211, 0.5);
    .title {
      padding: 10px;
    }
    .item {
      padding: 5px 20px;
    }
  }
  .main {
    flex: 1;
    padding: 20px;
  }
}
</style>
